import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import css from './episode.module.scss'
import Popup from '@/components/Popup'
export default class VideoEpisode extends PureComponent {
    popupRef = React.createRef()

    static propTypes = {
        detailData: PropTypes.object.isRequired,
        onSelect: PropTypes.func
    }

    state = {
        currentEp: 0
    }

    handleEpisode = episode => {
        const { cid } = episode
        this.setState({
            currentEp: cid
        })        
        this.popupRef.current.hide()
        typeof this.props.onSelect === 'function' && this.props.onSelect(episode)
    }

    handlePopup = () => {
        this.popupRef?.current?.show()
    }

    componentDidMount () {
        const { detailData: { cid } } = this.props
        this.setState({
            currentEp: cid
        })
    }

    render() {
        const { detailData: { pages } } = this.props
        const { currentEp } = this.state
        if (pages.length > 1) {
            return (
                <div className={css['wrap']}>
                    <div className={css['list']}>
                        {
                            pages.map(item => {
                                return (
                                    <div 
                                        key={item.cid} 
                                        className={`${css['item']} 
                                        ${currentEp === item.cid ? css['item-active'] : ''}`}
                                        onClick={() => this.handleEpisode(item)}
                                    >
                                        <span>{item.part}</span>
                                    </div>
                                )
                            })
                        }                        
                    </div>
                    <span className="btn" onClick={this.handlePopup}><i className="fa fa-dropdown"></i></span>
                    <Popup className={css['popup']} title={`分集(${pages.length})`} ref={this.popupRef}>
                        <div className={css['list']}>
                            {
                                pages.map(item => {
                                    return (
                                        <div 
                                            key={item.cid} 
                                            className={`${css['item']} 
                                            ${currentEp === item.cid ? css['item-active'] : ''}`}
                                            onClick={() => this.handleEpisode(item)}
                                        >
                                            <span>{item.part}</span>
                                        </div>
                                    )
                                })
                            }                        
                        </div>
                    </Popup>
                </div>
            )
        } else {
            return (<></>)
        }        
    }
}
